<template>
  <div class="sec-main">
    <div class="search-container">
      <sec-form
        :searchBox="{ span: 6 }"
        :ruleForm="ruleForm"
        :formData="formData"
        :optionData="optionData"
        @reset="reset"
        @submitForm="submitForm"
      >
      </sec-form>
    </div>

    <div class="table-container">
      <sec-table :tableData="tableData" :tableCol="tableCol"></sec-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        background
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="totalSize"
      >
      </el-pagination>
    </div>
    <el-drawer title="审核详情" size="60%" :visible.sync="drawer" :modal="false">
      <span></span>
    </el-drawer>
  </div>
</template>

<script>
import { paginationMixin } from "@/mixins/pagination";
import { reviewApplyApi } from "api/dataCenter.js";

export default {
  mixins: [paginationMixin],

  data() {
    return {
      selectRow: {},
      ruleForm: {
        originName: "",
        alarmId: "",
      },
      optionData: {
        originName: [],
      },
      formData: [
        {
          type: "select",
          filterable: true,
          clearable: false,
          label: this.$t("状态"),
          prop: "status",
          span: 6,
          optionData: [
            { label: this.$t("全部"), value: "" },
            { label: this.$t("审核中"), value: 0 },
            { label: this.$t("审核成功"), value: 1 },
            { label: this.$t("审核驳回"), value: 2 },
          ],
          change: (data) => {
            this.submitForm();
          },
        },
        {
          type: "text",
          clearable: true,
          label: this.$t("空间ID"),
          prop: "spaceId",
          span: 6,
        },
      ],
      ruleForm: { user: "", reviewUser: "", spaceId: "", status: "" },
      // rules: { originName: [{ required: true, message: this.$t("请输入"), trigger: "blur" }] },
      tableData: [],
      tableCol: [
        { label: this.$t("ID"), prop: "id" },
        { label: this.$t("空间ID"), prop: "spaceId" },
        { label: this.$t("详情ID"), prop: "detailId" },
        { label: this.$t("名称"), prop: "name" },
        { label: this.$t("申请人"), prop: "user" },
        // { label: this.$t("提交时间"), prop: "submitTime", width: 100 },
        { label: this.$t("审核人"), prop: "reviewUser" },
        // { label: this.$t("审核时间"), prop: "reviewTime" },
        // { label: this.$t("审核顺序"), prop: "sort" },
        {
          label: this.$t("类型"),
          prop: "type",
          formatter: (data) => {
            return this.utils.getDicLabel("reviewType", data.type);
          },
        },
        {
          label: this.$t("状态"),
          prop: "status",
          formatter: (data) => {
            return this.utils.getDicLabel("reviewStatus", data.status);
          },
        },
        // { label: this.$t("状态"), prop: "status" },
        // { label: this.$t("有效性"), prop: "valid" },
        { label: this.$t("创建时间"), prop: "createTime" },
        { label: this.$t("更新时间"), prop: "updateTime" },
      ],
      drawer: false,
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      this.getRiviewApplyData(); //初始化表格数据
    },
    //获取表格数据
    getRiviewApplyData() {
      //打开loading
      let loading = this.openLoading(".sec-main");
      reviewApplyApi({
        pageNum: this.page,
        pageSize: this.pageSize,
        requestData: {
          status: this.ruleForm.status,
          spaceId: this.ruleForm.spaceId,
        },
      }).then((res) => {
        console.log("[ res ] >", res);
        loading.close();
        let { list, pageNum, pageSize, pages, total } = res.data;
        this.tableData = list;
        this.totalSize = total;
      });
    },
    // 搜索
    submitForm() {
      this.page = 1;
      // console.log("spaceId>", this.ruleForm.spaceId);
      this.getRiviewApplyData();
    },
    reset() {
      this.page = 1; //每次点击重置的时候都是第一页
      this.getRiviewApplyData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getRiviewApplyData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getRiviewApplyData();
    },
    detail(data) {
      console.log(data);
      this.drawer = true;
      // window.location = "/review/detail"
      // this.$router.push("/review/detail");
    },
    approve(data) {
      console.log("approve", data);
      let loading = this.openLoading(".sec-main");
      reviewUpdateApi({
        id: data.row.id,
        status: 1,
      }).then((res) => {
        console.log("[ approve_res ] >", res);
        loading.close();
        // let { list, pageNum, pageSize, pages, total } = res.data;
        if (res.code === 0) {
          this.initPage();
        }
      });
    },
    reject(data) {
      console.log("reject", data);
      let loading = this.openLoading(".sec-main");
      reviewUpdateApi({
        id: data.row.id,
        status: 2,
      }).then((res) => {
        console.log("[ reject_res ] >", res);
        loading.close();
        // let { list, pageNum, pageSize, pages, total } = res.data;
        if (res.code === 0) {
          this.initPage();
        }
      });
    },
  },
};
</script>

<style>
.el-table .fail-row {
  background: lightcoral;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-table .pending-row {
  background: #f0f9eb;
}
</style>
